<!--
 * @Description: 
 * @Version: 0.0
 * @Author: taosong
 * @Date: 2023-03-26 16:56:21
 * @LastEditors: taosong
 * @LastEditTime: 2023-04-02 10:11:27
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      http-equiv="X-UA-Compatible"
      content="IE=edge"
    />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>学习使用attribute变量</title>
    <script src="../libs/index.js"></script>
  </head>
  <body>
    <canvas id="canvas"> 此浏览器不支持canvas </canvas>

    <script>
      /** @type {HTMLCanvasElement} */
      const ctx = document.getElementById('canvas')
      const gl = ctx.getContext('webgl')

      // 创建着色器源码
      // 顶点着色器
      const VERTEX_SHADER_SOURCE = `
        // 定义变量 只传递顶点数据 只能在顶点着色器使用
        attribute vec4 aPosition;
        // 必须要存在的main函数
        void main() {
          // 点的位置
          gl_Position = aPosition;
          // 点的大小
          gl_PointSize = 30.0;
        }
      `
      // 片元着色器
      const FRAGMENT_SHADER_SOURCE = `
        void main() {
          // 点的颜色
          gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
        }
      `
      const program = initShader(
        gl,
        VERTEX_SHADER_SOURCE,
        FRAGMENT_SHADER_SOURCE
      )

      const aPosition = gl.getAttribLocation(program, 'aPosition')
      // xyzw
      // gl.vertexAttrib4f(aPosition, 0.5, 0.5, 0.0, 1.0)
      // gl.vertexAttrib3f(aPosition, 0.5, 0.5, 0.0)
      let x = 0
      setInterval(() => {
        x += 0.1
        if (x > 1) {
          x = 0
        }
        gl.vertexAttrib1f(aPosition, x)
        // 执行绘制
        // 1要绘制的是什么 从哪个开始  使用几个顶点
        gl.drawArrays(gl.POINTS, 0, 1)
      }, 200)
    </script>
  </body>
</html>
